<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>DeathGhost-菜品详情页</title>
<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/axios.min.js"></script>
<script type="text/javascript" src="/js/public.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jqpublic.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
<script>
    //jquery需等vue数据返回页面后再加载
    function init() {
        $(function () {
            $('.title-list li').click(function () {
                var liindex = $('.title-list li').index(this);
                $(this).addClass('on').siblings().removeClass('on');
                $('.menutab-wrap div.menutab').eq(liindex).fadeIn(150).siblings('div.menutab').hide();
                var liWidth = $('.title-list li').width();
                $('.shopcontent .title-list p').stop(false, true).animate({'left': liindex * liWidth + 'px'}, 300);
            });

            $('.menutab-wrap .menutab li').hover(function () {
                $(this).css("border-color", "#ff6600");
                $(this).find('p > a').css('color', '#ff6600');
            }, function () {
                $(this).css("border-color", "#fafafa");
                $(this).find('p > a').css('color', '#666666');
            });

            //及时校验   不是正整数边为一
            $(".nums").blur(function () {
                let nums = $(this).val();
                let ex = /^\d+$/;
                if (!ex.test(nums)) {
                    $(this).val("1");
                }
            });


        });
    }
</script>
</head>
<body>
<header class="header">


</header>
<script>

 $('.header').load('/header.html',function(responseTxt,statusTxt,xhr){


 })

</script>
<!--Start content-->
<div id="app">
<section class="slp">
    <section class="food-hd" style="height: 500px">
        <div class="foodpic">
            <img :src="'http://192.168.6.186:8081/'+dish.picture" id="showimg">
            <ul class="smallpic">
                <li><img :src="'http://192.168.6.186:8081/'+dish.picture" onmouseover="show(this)" onmouseout="hide()"></li>
            </ul>
        </div>
        <div class="foodtext">
            <div class="foodname_a">
                <h1>{{dish.dishName}}</h1>
                <p>店铺地址：{{dish.address}}</p>
            </div>
            <div class="price_a">
                <p class="price01">现价：￥<span>{{dish.price}}</span></p>
                <p class="price02">原价：￥<s>{{dish.marketPrice}}</s></p>
                <p class="price01">当前搭配价格：￥<span>{{price}}</span></p>
            </div>
            <!--<div class="Freight">
                <span>分量：</span>
                <span><i>小份</i><i>中份</i><i>大份</i></span>
                <span>10.00</span>
            </div>-->
            <section class="fslist_navtree" style="width: 550px">
                <ul class="select">
                    <li class="select-list" v-for="(spec,index) in specs">
                        <dl id="select1">
                            <dt>{{spec.specName}}:</dt>
                            <dd v-for="(k,v) in spec.specValue"><a href="javascript:" @click="setPrice(k,index)">{{v}}</a></dd>
                        </dl>
                    </li>
                </ul>
            </section>
            <ul class="Tran_infor">
                <li>
                    <p class="Numerical" v-if="dish.stock != 0">{{dish.stock}}</p>
                    <p class="Numerical" v-if="dish.stock == 0">已售完</p>
                    <p>当前库存</p>
                </li>
                <li class="line">
                    <p class="Numerical">{{page.total}}</p>
                    <p>累计评价</p>
                </li>
                <li>
                    <p class="Numerical">{{dish.dishCategoryName}}</p>
                    <p>菜品类别<br></p>
                </li>
            </ul>
            <form action="/cart/add" method="post">
                <!--<input type="text" name="dishid" :value="dish.id">-->
                <!--<input type="text" name="totalPrice" :value="price">-->
                <div class="BuyNo">
                    <span>我要买：<input type="number" name="Number" required autofocus min="1" v-model="num" class="nums" />份</span>
                    <span></span>
                    <div class="Buybutton">
                        <input type="button" value="加入购物车" class="BuyB" @click="sub(price)">
                        <a :href="'/shop/goShop/'+dish.shopId"><span class="Backhome">进入店铺首页</span></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="viewhistory">
            <span class="VHtitle">看了又看</span>
            <ul class="Fsulist">
                <li>
                    <a  target="_blank" title="酱爆茄子"><img src="/upload/01.jpg"></a>
                    <p>酱爆茄子</p>
                    <p>￥12.80</p>
                </li>
                <li>
                    <a  target="_blank" title="酱爆茄子"><img src="/upload/01.jpg"></a>
                    <p>酱爆茄子</p>
                    <p>￥12.80</p>
                </li>
            </ul>
        </div>
    </section>
    <!--bottom content-->
    <section class="Bcontent">
        <article>
            <div class="shopcontent">
                <div class="title2 cf">
                    <ul class="title-list fr cf ">
                        <li class="on">详细说明</li>
                        <li @click="firstPage()">评价详情（{{page.total}}）</li>
                        <li @click="firstPage()">成交记录（{{page.total}}）</li>
                        <p><b></b></p>
                    </ul>
                </div>
                <div class="menutab-wrap">
                    <!--case1-->
                    <div class="menutab show">
                        <div class="cont_padding">
                            <img :src="'http://192.168.6.186:8081/'+dish.picture" width="30%">
                            <p>{{dish.description}}</p>
                        </div>
                    </div>
                    <!--case2-->
                    <div class="menutab">
                        <div class="cont_padding">
                            <table class="Dcomment">
                                <th width="80%">评价内容</th>
                                <th width="20%" style="text-align:right">评价人</th>
                                <tr v-for="review in page.records">
                                    <td>
                                        {{review.comment}}
                                        <time>{{review.orderTime}}</time>
                                    </td>
                                    <td align="right">{{review.userName}}</td>
                                </tr>
                            </table>
                            <div class="TurnPage" id="t1">
                                <a href="javascript:">
                                    <span v-if="page.current != 1" class="Prev" @click="firstPage()"><i></i>首页</span>
                                </a>
                                <a v-if="page.current != 1" href="javascript:"><span class="PNumber" @click="lastPage()">上一页</span></a>
                                <a v-for="p in page.pages" href="javascript:;" >
                                    <span v-if="p == page.current" class="PNumber"><font color="#dc143c">{{p}}</font></span>
                                    <span v-if="p != page.current" class="PNumber" @click="goPage(p)">{{p}}</span>
                                </a>
                                <a v-if="page.current != page.pages && page.total != 0" href="javascript:"><span class="PNumber" @click="nextPage()">下一页</span></a>
                                <a href="javascript:">
                                    <span v-if="page.current != page.pages && page.total != 0" class="Next" @click="endPage()">尾页<i></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--case4-->
                    <div class="menutab">
                        <div class="cont_padding">
                            <table width="888">
                                <th width="35%">买家</th>
                                <th width="20%">价格</th>
                                <th width="15%">数量</th>
                                <th width="30%">成交时间</th>
                                <tr height="40" v-for="note in page.records">
                                    <td>{{note.userName}}</td>
                                    <td>{{note.totalPrice}}</td>
                                    <td>{{note.dishNum}}</td>
                                    <td>{{note.orderTime}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="TurnPage" id="t2">
                            <a href="javascript:">
                                <span v-if="page.current != 1" class="Prev" @click="firstPage()"><i></i>首页</span>
                            </a>
                            <a v-if="page.current != 1" href="javascript:"><span class="PNumber" @click="lastPage()">上一页</span></a>
                            <a v-for="p in page.pages" href="javascript:;" >
                                <span v-if="p == page.current" class="PNumber"><font color="#dc143c">{{p}}</font></span>
                                <span v-if="p != page.current" class="PNumber" @click="goPage(p)">{{p}}</span>
                            </a>
                            <a v-if="page.current != page.pages && page.total != 0" href="javascript:"><span class="PNumber" @click="nextPage()">下一页</span></a>
                            <a href="javascript:">
                                <span v-if="page.current != page.pages && page.total != 0" class="Next" @click="endPage()">尾页<i></i></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <!--ad&other infor-->
        <aside>
            <!--广告位或推荐位-->
            <a  title="广告位占位图片" target="_blank"><img src="/upload/2014912.jpg"></a>
        </aside>
    </section>
</section>

<footer>
 <section class="Otherlink">
  <aside>
   <div class="ewm-left">
    <p>手机扫描二维码：</p>
    <img src="/images/Android_ico_d.gif">
    <img src="/images/iphone_ico_d.gif">
   </div>
   <div class="tips">
    <p>客服热线</p>
    <p><i>1830927**73</i></p>
    <p>配送时间</p>
    <p><time>09：00</time>~<time>22:00</time></p>
    <p>网站公告</p>
   </div>
  </aside>
  <section>
    <div>
    <span><i class="i1"></i>配送支付</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i2"></i>关于我们</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i3"></i>帮助中心</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
    </ul>
    </div>
  </section>
 </section>
<div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn" title="DeathGhost">DeathGhost</a></div>
</footer>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                //菜品信息
                dish: null,
                //评价详情表
                page : [],
                //当前页码
                current: 0,
                //规格属性信息
                specs: 0,
                //当前价格
                price : null,
                p : [],
                num:1
            }
        },
        methods:{
            //加入购物车
            sub(price){
                axios.post("/cart/add",{
                    nums:this.num,
                    money:price
                }).then(r=>{
                    if(r.data.code===200){
                        location.href="/cart_vue/cart";
                    }
                })
            },
            //跳转首页
            firstPage() {
                this.current = 1;
                this.getRList();
            },
            //上一页
            lastPage(){
                this.current = this.current - 1;
                this.getRList();
            },
            goPage(p){
                this.current = p;
                this.getRList();
            },
            nextPage(){
                this.current = this.current + 1;
                this.getRList();
            },
            //尾页
            endPage(){
                this.current = this.page.pages;
                this.getRList();
            },
            getRList(){
                axios.get("/dish/dishDetails?current="+this.current).then(r => {
                    if(r.data.code === 200){
                        this.page = r.data.data[1];
                    }
                })
            },
            //-----------------------------------------------------------------------
            setPrice(k,index){
                this.price = this.dish.price;
                let l = this.specs.length;
                for(let i = 0; i < l; i ++){
                    if(this.p[i] == null){
                        this.p[i] = 0;
                    }
                }
                //console.log(index);

                this.p[index] = k;
                let temp = 0;
                //console.log(this.p);
                for(let i = 0; i < l; i ++){
                    temp += parseInt(this.p[i]);
                }
                this.price += temp;
                //console.log(this.p);
            }
        },
        mounted: function (){
            axios.get("/dish/dishDetails?current=1").then(r => {
                if(r.data.code === 200){
                    this.dish = r.data.data[0];
                    this.page = r.data.data[1];
                    this.specs = r.data.data[2];
                    this.price = this.dish.price;
                    //console.log(this.specs);
                    this.$nextTick(()=>{
                        init();
                    });
                }
            });
        }
    })
</script>
</html>
